<template>
    <div class="config">
        <Tabs type="card" :animated="false" style="background:#efeff1" v-model="tabName">
            <TabPane label="门禁配置">
            <h2 class="margin-bottom-20 border-bottom" style="padding-bottom:20px">门禁配置</h2>
            <p class="margin-bottom-20 entrance-title">1、长时间未关门预警规则</p>
            <div class="open-warning margin-bottom-20">
                <span>*</span>
                <span>开启预警</span>
                <i-switch :value='status' @on-change="change"></i-switch>
            </div>
            <div class="warning-rules margin-bottom-20">
                <span>预警规则：如果门禁检测到</span>
                <Input number v-model="time" placeholder="请输入..." style="width: 100px"></Input>
                <span>秒内没有关门，则门禁峰鸣报警。</span>
            </div>
            <i-button class="btn" type="primary" @click="setTime">保存</i-button>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
import { http, api } from '@/libs/http'
export default {
  name: 'config_index',
  data () {
    return {
      tabName: 0,
      time: '10',
      status: true
    }
  },
  methods: {
    change (status) {
      this.status = status
    },
    setTime () {
      // 获取最新水表 watermeter_action_read
      if (this.status === false) {
        this.$Message.success('请开启预警')
        return
      }
      if (!this.time) {
        this.$Message.success('请输入长时间未关门时间')
        return
      }
      let params = {
        'unclose_warn_time': this.time
      }

      http.request(this, api.face_access_setting, null, params, res => {
        if (res) {
          this.$Message.success('长时间未关门预警设置成功')
          console.log('长时间未关门', res)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.entrance-title{
    margin-left:20px;
    font-size:15px;
}
.open-warning{
    display: flex;
    margin-left:30px;
    line-height:1.4;
    span:nth-child(1){
        color:red;
        font-size:20px;
    }
    span:nth-child(2){
        margin: 0 20px;
        line-height: 25px;
    }
}
.warning-rules{
    margin-left:30px;
    font-size:12px;
    color:#000;
}
.btn{
    margin-left:30px;
}
</style>
